// 该文件用于vuex中最为核心的store

import Vue from 'vue'
import vuex from 'vuex'
等等
Vue.use(vuex)

// 准备actions，actions用于响应组件中的动作
const actions = {
    /*
        actions中定义的方法可以接收到两个参数：
            第一个官方称之为context，是个对象，里面包含了dispatch、commit等，不过并不等同于store
            第二个是VueComponent传来的值
    */
    add(context,num){
        context.commit('ADD',num)
    },
    addWait(context,num){
        setTimeout(() => {
            context.commit('ADD',num)
        }, 500);
    }
}

// 准备mutations，用于操作数据
const mutations = {
    /*
        先说一个小知识，我们开发的过程中一般把mutations中的方法名字都写成大写，因为容易区分
        同样，mutations中的方法也可以接收到两个参数：
            第一个是state
            第二个是actions或者VueComponent传来的值
    */
    ADD(state,num){
        state.sum+=num
    },  
    REDUCE(state,num){
        state.sum-=num
    }
}

// 我们开发的过程中有时候需要对于state中的数据进行一个简单的处理再显示的需求，vue开发团队自然也想到了，他们提供了getters
const getters = {
    // getters中的方法会接收到一个参数，就是state。因为getters的使命就是对于state里的数据进行处理然后返回，所以这点很容易理解
    bigSum(state){
        return state.sum*10
    }
}
             
//准备state，用于存放数据
const state = {
    sum:0
}

export default new vuex.Store({
    actions,
    mutations,
    state,
    getters
})

/*
    这样写也可以
    export default new Vuex.Store({
        ...
    })
*/